<template>
  <!-- <div 
  class="border_normal radius_normal pd_1"
  > -->
  <div>
    <el-input v-model="valueLWH" :placeholder="placeholderLWH" @input="changeLWH" v-if="inputType == 'LWH'"
      v-on:keyup.enter.native="enterLWH">
      <template slot="prepend">
        <div @click="changeType()" style=" cursor: pointer;">
          <!-- <span class="iml-iconfont iml-icon-chizi"></span> -->
          <i class="el-icon-thumb color_primary"></i>

          {{ $tt('label_lwh') }}
        </div>
      </template>
      <template slot="append">
        <div>
          cm
          <el-tooltip effect="dark" :content="$tt('tip_lwh_use_split')" placement="top-start">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      </template>
    </el-input>
    <el-input :value="value" :placeholder="placeholderV" @input="changeV" v-else>
      <template slot="prepend">
        <div @click="changeType()" style=" cursor: pointer;">
          <!-- <span class="iml-iconfont iml-icon-celiangtiji"></span> -->
          <i class="el-icon-thumb color_primary"></i>
          {{ $tt('label_volume') }}
        </div>
      </template>
      <template slot="append">
        <div>m³</div>
      </template>
    </el-input>
  </div>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      inputType: "V",
      valueLWH: "",
      // valueV: this.value,

    };
  },
  props: {
    value: [String, Number],
    placeholderLWH: String,
    placeholderV: String,
  },
  computed: {
    showValue() {
      if (Number.isNaN(this.value)) {
        return "NaN"
      }
      if (_.isEmpty(this.value)) {
        return ""
      }
      return this.$reg.FormatDigitNumber(this.value, 8)
    },
  },

  methods: {
    enterLWH() {
      if (!Number.isNaN(Number(this.value))) {
        const list = this.valueLWH.split(/[\*\+\\\/,\s-]/).map(it => it.trim()).filter(it => it)
        if (list.length == 3) {
          if (list.every(it => this.$reg.DigitNumber(it, 2, 9))) {
            this.valueLWH = list.join('*')
          }
        }

      }
    },
    changeType(e) {
      if (e) {
        this.inputType = e
      } else {
        this.inputType = this.inputType === 'LWH' ? 'V' : 'LWH'
      }
    },
    changeV(e) {
      this.valueLWH = ""
      this.$emit("input", e)
    },
    changeLWH(e) {
      const val = e.trim()
      if (val) {
        // if (this.$reg.DigitNumber(val, 3, 9)) {
        //   this.$emit("input", Number(val))
        //   return
        // }
        const list = val.split(/[\*\+\\\/,\s-]/).map(it => it.trim()).filter(it => it)
        if (list.length == 3) {
          if (list.every(it => this.$reg.DigitNumber(it, 2, 9))) {
            let volume = this.$math_ceil(_.reduce(list, (s, v) => this.$math_mul(s, this.$math_mul(0.01, v)), 1), 8)
            if (!Number.isNaN(volume)) {
              // volume = this.$reg.FormatDigitNumber(volume, 8)
              // this.valueV = volume
              this.$emit("input", volume)
              return
            }
          }

        }
      }
      // this.valueV = val ? Number.NaN : ""
      this.$emit("input", val ? Number.NaN : "")
    }
  },
};
</script>
